<template>
  <div class="videos">
    <video
        ref="videoPlayer"
        class="video-js"
        controls
        preload="auto"
        width="640"
        height="120"
        data-setup="{}"
    >
      <source :src="videoSrc" type="video/mp4"/>
    </video>
  </div>
</template>

<script>
import {onMounted, ref} from 'vue'
import videojs from 'video.js'
import 'video.js/dist/video-js.css'

export default {
  props: ['videoSrc'],
  setup(props) {
    const videoPlayer = ref(null)

    onMounted(() => {
      videojs(videoPlayer.value, {
        fluid: true,
        autoplay: true,
        muted: true,
        loop: true
      }, function onPlayerReady() {
        console.log('Your player is ready!')
      })
    })

    return {
      videoPlayer
    }
  }
}
</script>
<style lang="scss">
.videos {
  position: relative;
  width: 100%;
  height: calc(100% - 30px);

  .video-js {
    width: 100%;
    height: 100% !important;
  }

  .video-js.vjs-fluid {
    padding-top: 38%;
  }

  .video-js .vjs-tech {
    object-fit: cover;
  }
}
</style>
